<template>
	<cl-crud @load="onLoad">
		<template #slot-top-stats>
			<commission-count ref="commission-count"></commission-count>
		</template>

		<template #slot-datepicker>
			<div class="_top-filter">
				<div style="width:125px;">
					<el-select
						size="mini"
						class="time-type"
						v-model="selects.timeType"
						@change="val => refresh({ timeType: val, page: 1 })"
					>
						<el-option label="创建时间" :value="0"></el-option>
						<el-option label="付款时间" :value="1"></el-option>
						<el-option label="结算时间" :value="2"></el-option>
					</el-select>
				</div>
				<div style="width:350px;">
					<date-picker
						style="width:350px;"
						:datas="datas"
						@change="val => refresh({ startTime: val[0], endTime: val[1], page: 1 })"
						@refresh="refresh({ startTime: '', endTime: '', page: 1 })"
					></date-picker>
				</div>
			</div>
		</template>
		<template #slot-staff>
			<div>
				<select-taobao
					class="selects"
					v-model="selects.pid"
					@change="val => taobaorefresh({ taobaoId: val, page: 1 })"
				></select-taobao>
			</div>
			<!-- 推广位 -->
			<div>
				<select-adzone
					class="selects"
					ref="promotion"
					v-model="selects.positionId"
					@change="val => refresh({ positionId: val, page: 1 })"
				></select-adzone>
			</div>
			<div>
				<select-staff
					class="selects"
					ref="selectstaff"
					v-model="selects.staffId"
					@change="val => refresh({ staffId: val, page: 1 })"
				></select-staff>
			</div>
			<el-button
				@click="sellerShopExport"
				v-permission="$service.order.permission.sellerShopExport"
				type="primary"
				style="margin-left:10px"
				size="mini"
			>
				<i class="el-icon-download"></i>导出报表
			</el-button>
		</template>
		<template #table-column-sellerShopTitle="{ scope }">
			<div class="shop-title" @click="toDetail(scope.row)">
				{{ scope.row.sellerShopTitle }}
			</div>
		</template>
	</cl-crud>
</template>

<script>
import CommissionCount from '@/components/order/commission-count';
import DatePicker from '@/components/order/date-picker';
import SelectStaff from '@/components/order/select-staff';
import SelectTaobao from '@/components/order/select-taobao';
import SelectAdzone from '@/components/order/select-adzone';
import { dateFormat, download } from '@/utils/index';
import moment from 'moment';
export default {
	data() {
		return {
			crud: null,

			selects: {
				timeType: 0,
				pid: '',
				positionId: '',
				staffId: '',
				tkStatus: '',
				teamId: '',
				label: ''
			},
			options: {
				label: [],
				departmentBelow: []
			},
			params: {
				startTime: this.$route.query.startTime,
				endTime: this.$route.query.endTime,
				timeType: 0
			},
			datas: [this.$route.query.startTime, this.$route.query.endTime]
		};
	},

	components: {
		CommissionCount,
		DatePicker,
		SelectStaff,
		SelectAdzone,
		SelectTaobao
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service({
				page: this.$service.order.sellerShopStatistics
			})
				.set('dict', {})
				.set('table', {
					props: {
						'default-sort': {
							order: 'descending',
							prop: 'totleCommission'
						}
					},
					columns: [
						{
							type: 'index',
							align: 'center',
							label: '序号',
							width: 80
						},
						{
							label: '店铺名称',
							prop: 'sellerShopTitle',
							align: 'center',
							minWidth: 200
						},
						{
							label: '全部销售额',
							prop: 'alipayTotalPrice',
							align: 'center',
							minWidth: 140,
							sortable: true
						},
						{
							label: '全部佣金',
							prop: 'totleCommission',
							align: 'center',
							minWidth: 140,
							sortable: true
						},
						{
							label: '付款佣金',
							prop: 'payCommission',
							align: 'center',
							minWidth: 140,
							sortable: true
						},
						{
							label: '结算佣金',
							prop: 'settleCommission',
							align: 'center',
							minWidth: 140,
							sortable: true
						},
						{
							label: '失效佣金',
							prop: 'invalidCommission',
							align: 'center',
							minWidth: 140,
							sortable: true
						},
						{
							label: '全部订单',
							prop: 'orderNum',
							align: 'center',
							minWidth: 140,
							sortable: true
						},
						{
							label: '付款订单',
							prop: 'payOrderNum',
							align: 'center',
							emptyText: '无',
							minWidth: 140,
							sortable: true
						},
						{
							label: '结算订单',
							prop: 'settleOrderNum',
							align: 'center',
							emptyText: '无',
							minWidth: 140,
							sortable: true
						},
						{
							label: '失效订单',
							prop: 'invalidOrderNum',
							align: 'center',
							emptyText: '无',
							minWidth: 140,
							sortable: true
						}
					],
					op: {
						visible: false
					},
					on: {
						// 'row-click': row => {
						// 	let newParams = {};
						// 	if (this.params.startTime && this.params.endTime) {
						// 		newParams = {
						// 			startTime: this.params.startTime,
						// 			endTime: this.params.endTime
						// 		};
						// 	}
						// 	this.$emit('showdetail', {
						// 		sellerShopTitle: row.sellerShopTitle,
						// 		...newParams
						// 	});
						// }
					}
				})
				.set('search', {
					key: {
						placeholder: '请输入店铺关键词'
					}
				})
				.set('layout', [
					[
						'refresh-btn',
						'slot-datepicker',
						'flex1',
						'slot-staff',
						'flex1',
						'search-key'
					],
					['slot-top-stats'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					const { list, subData } = await next(params);
					this.params = params;
					list.map(item => {
						item.alipayTotalPrice = parseFloat(item.alipayTotalPrice).toFixed(2);
						item.totleCommission = parseFloat(item.totleCommission).toFixed(2);
					});
					this.$refs['commission-count'].refresh(subData);
				})
				.done();
			if (!(this.params.startTime && this.params.endTime)) {
				this.params = {
					...this.params,
					...dateFormat(0)
				};
			}
			app.refresh(this.params);
		},
		taobaorefresh(params) {
			if (params.taobaoId) {
				// 选择阿里妈妈时进行联动
				this.selects.positionId = '';
				params.positionId = '';
				this.$refs['promotion'].value2 = '';
				this.$refs['promotion'].refresh({
					taobaoId: params.taobaoId
				});
			} else {
				this.$refs['promotion'].refresh({
					taobaoId: ''
				});
			}
			this.crud.refresh(params);
		},
		refresh(params) {
			if (params.startTime) {
				this.params.startTime = params.startTime;
				this.params.endTime = params.endTime;
			}
			if (params.timeType == 0) {
				params.prop = 'tkCreateTime';
			} else if (params.timeType == 1) {
				params.prop = 'tkPaidTime';
			} else if (params.timeType == 2) {
				params.prop = 'tkEarningTime';
			}

			if (params.taobaoId) {
				//选择阿里妈妈时进行联动
				this.$refs['promotion'].reset();
				this.$refs['promotion'].refresh({
					taobaoId: params.taobaoId
				});
				this.crud.refresh({ ...params, positionId: '' });
				return false;
			}
			this.crud.refresh(params);
		},
		toDetail(row) {
			let newParams = {};
			if (this.params.startTime && this.params.endTime) {
				newParams = {
					startTime: this.params.startTime,
					endTime: this.params.endTime
				};
			}
			this.$emit('showdetail', {
				sellerShopTitle: row.sellerShopTitle,
				...newParams
			});
		},
		sellerShopExport() {
			this.$service.order.sellerShopExport(this.params).then(res => {
				download({
					data: res,
					fileName: `店铺统计-${moment().format('YYYY-MM-DD HH:mm:ss')}`
				});
			});
		}
		// refresh(params) {
		// 	if (params.startTime) {
		// 		this.params.startTime = params.startTime;
		// 		this.params.endTime = params.endTime;
		// 	}
		// 	if (params.taobaoId) {
		// 		this.$refs['promotion'].refresh({
		// 			taobaoId: params.taobaoId
		// 		});
		// 	} else {
		// 		this.$refs['promotion'].refresh();
		// 	}
		// 	if (params.positionId) {
		// 		this.$refs['selectlabel'].refresh({
		// 			positionId: params.positionId
		// 		});
		// 	} else {
		// 		this.$refs['selectlabel'].refresh();
		// 	}
		// 	if (params.teamId) {
		// 		this.$refs['selectstaff'].refresh({
		// 			teamId: params.teamId
		// 		});
		// 	} else {
		// 		this.$refs['selectstaff'].refresh();
		// 	}
		// 	if (params.timeType == 0) {
		// 		params.prop = 'tkCreateTime';
		// 	} else if (params.timeType == 1) {
		// 		params.prop = 'tkPaidTime';
		// 	} else if (params.timeType == 2) {
		// 		params.prop = 'tkEarningTime';
		// 	}
		// 	this.crud.refresh(params);
		// }
	}
};
</script>

<style lang="stylus" scoped>
.delete-row {
	margin-left: 10px;
	cursor: pointer;

	&:hover {
		color: red;
	}
}
._top-filter {
	width: auto;
}
._top-filter-other {
	display: flex;
	width: 100px;
	margin-left: 10px;
	line-height: 0;
}

._top-filter-other-text {
	margin-left: 2px;
}
.shop-title {
	color: #f40;
	cursor pointer;
}
</style>
